<template>
  <div
    class="item"
    :class="{ 'is-lock': item.isLock }"
    :title="['equipment'].includes(item.type) ? '' : item.name"
    @click.right="rigthClick(item)"
    @click.left="leftClick"
  >
    <ewg-tooltip showLeft>
      <img :src="item.img" :alt="item.name" />
      <i v-if="item.isLock" class="ewg-icon-suoding lock-icon"></i>
      <div
        class="equip-icon"
        :class="'grade' + item.grade"
        ref="goodItem"
      ></div>
      <span v-if="!['equipment'].includes(item.type)">{{ item.count }}</span>
      <template
        v-slot:content
        v-if="item.type === 'equipment' && equipData.flag"
      >
        <equip-tooltip :equip="equipData.value"></equip-tooltip>
      </template>
      <template
        v-slot:contentLeft
        v-if="item.type === 'equipment' && wearableEquip().flag"
      >
        <equip-tooltip isWear :equip="wearableEquip().value"></equip-tooltip>
      </template>
    </ewg-tooltip>
    <teleport to="body" v-if="isMenuShow">
      <div class="left-menu" :style="{ left: left + 'px', top: top + 'px' }">
        <template v-for="o of leftMenu" :key="o.name">
          <div
            class="clickScale"
            v-if="!(o.hidden && o.hidden(item))"
            @click="o.func(item)"
          >
            {{ o.name }}
          </div>
        </template>
      </div>
    </teleport>
  </div>
</template>
<script lang="ts">
import { useStore } from "@/store";
import consumablesPools from "@/const/consumables/pools";
import { consumablesType } from "@/const/consumables/pools";
import { MutationTypes } from "@/store/player/mutation-types";
import { SysActionTypes } from "@/store/sys/action-types";
import { PlayerActionTypes } from "@/store/player/action-types";
import { OptionsDataType } from "@/const/indexedDB";
import { Equipment, EquipDataType } from "@/const/equips/equipmentType";
import { computed, reactive, ref } from "vue";
import { PlayerStatusOptionType } from "@/store/player/types";
import { SysInfo } from "@/const/sys";
import { WsDTO } from "@/const/ws";
const store = useStore();
export default {
  name: "GoodItem",
  props: ["item"],
  setup(props: any) {
    const equipData = reactive(new EquipDataType());
    const goodItem = ref();
    const isMenuShow = ref(false);
    const wearableEquips = computed(() => {
      return store.state.userWearableEquipments;
    });
    const userCHP = computed(() => {
      return store.getters.playerBattleProperty.CHP;
    });
    const rigthClick = (row: PackItem) => {
      // console.log(row);
      switch (row.type) {
        case "consumables": {
          // 使用消耗品
          if (store.state.userInfo.state) {
            store.dispatch(
              SysActionTypes.SYS_PUSH_INFO,
              new SysInfo(`当前无法使用消耗品`, 1)
            );
            return;
          }
          const something: ConsumablesPackItem = consumablesPools.get(row.name);
          switch (something.useType) {
            case consumablesType.FIXEDHEAL:
              store.dispatch(PlayerActionTypes.PLAYER_SET_STATUS, {
                type: PlayerStatusOptionType.HP,
                value: something.value
              });
              break;
            case consumablesType.PERCENTAGEHEAL:
              store.dispatch(PlayerActionTypes.PLAYER_SET_STATUS, {
                type: PlayerStatusOptionType.HP,
                value: Math.ceil(
                  store.getters.playerBattleProperty.HP * something.value
                )
              });
              break;
            case consumablesType.SURPRISEGIFT:
              break;
            default:
              console.log("不认识的消耗品类型");
              break;
          }
          store.commit(MutationTypes.REMOVE_ITEM_TO_PACKAGE, something.id);
          break;
        }
        case "equipment":
          // 装备物品
          store.dispatch(PlayerActionTypes.PLAYER_WEAR_EQUIP, equipData.value);
          break;
        default:
          console.log("其他物品");
          break;
      }
    };
    const useFull = (row: PackItem) => {
      if (store.state.userInfo.state) {
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo(`当前无法使用消耗品`, 1)
        );
        return;
      }
      const something: ConsumablesPackItem = consumablesPools.get(row.name);
      switch (something.useType) {
        case consumablesType.FIXEDHEAL:
          // eslint-disable-next-line no-case-declarations
          const count = Math.min(
            Math.ceil(
              (store.getters.playerBattleProperty.HP - userCHP.value) /
                something.value
            ),
            row.count
          );
          store.dispatch(PlayerActionTypes.PLAYER_SET_STATUS, {
            type: PlayerStatusOptionType.HP,
            value: count * something.value
          });
          store.commit(MutationTypes.REMOVE_ITEM_TO_PACKAGE_MUL, [
            { id: something.id, count }
          ]);
          break;
        case consumablesType.PERCENTAGEHEAL:
          // eslint-disable-next-line no-case-declarations
          const count2 = Math.min(
            Math.ceil(
              (store.getters.playerBattleProperty.HP - userCHP.value) /
                store.getters.playerBattleProperty.HP /
                something.value
            ),
            row.count
          );
          store.dispatch(PlayerActionTypes.PLAYER_SET_STATUS, {
            type: PlayerStatusOptionType.HP,
            value: Math.ceil(
              store.getters.playerBattleProperty.HP * something.value * count2
            )
          });
          store.commit(MutationTypes.REMOVE_ITEM_TO_PACKAGE_MUL, [
            { id: something.id, count: count2 }
          ]);
          break;
        case consumablesType.SURPRISEGIFT:
          break;
        default:
          console.log("不认识的消耗品类型");
          break;
      }
    };

    const wearableEquip = () => {
      const data = {
        flag: false,
        value: null
      };
      if (equipData.flag === true && equipData.value) {
        data.value = wearableEquips.value[equipData.value.type];
        data.value && (data.flag = true);
      }
      return data;
    };
    const getEquipDetail = async (row: PackItem) => {
      const params: OptionsDataType = {
        index: row.id
      };
      const data: Equipment = await store.dispatch(
        SysActionTypes.SYS_GET_EQUIP,
        params
      );
      if (data) {
        data.id = row.id;
        equipData.value = data;
        equipData.flag = true;
      }
    };

    //  左键菜单和出售
    const sellGood = (row: PackItem) => {
      if (row.isLock) return;
      store.commit(MutationTypes.REMOVE_ITEM_TO_PACKAGE, row.id);
      store.commit(MutationTypes.MAKE_MONEY, row.price);
      if (["equipment"].includes(row.type)) {
        const params: OptionsDataType = {
          index: row.id
        };
        store.dispatch(SysActionTypes.SYS_DEL_EQUIP, params);
      }
    };
    // 物品锁定
    const goodLock = (row: PackItem) => {
      row.isLock = !row.isLock;
    };
    const showEquip = () => {
      const body = {
        code: 0,
        data: new SysInfo(
          "展示装备",
          5,
          [equipData.value],
          1,
          store.state.userInfo.userName
        )
      };
      const data = new WsDTO(
        store.state.userInfo.userName,
        body,
        1,
        0
      ).ObjectToString();
      store.dispatch(SysActionTypes.SYS_WS_SEND, data);
    };
    const leftMenu = [
      {
        name: "使用",
        func: rigthClick
      },
      {
        name: "吃到满",
        func: useFull,
        hidden: (row: PackItem) => {
          return !(row.type === "consumables");
        }
      },
      {
        name: "出售",
        func: sellGood
      },
      {
        name: "是否锁定",
        func: goodLock
      },
      {
        name: "展示装备",
        func: showEquip,
        hidden: (row: PackItem) => {
          return !(row.type === "equipment");
        }
      }
    ];
    const left = ref(0);
    const top = ref(0);

    const setMenuShowFalse = (event: any) => {
      const flag = event.target !== goodItem.value;
      if (flag) {
        isMenuShow.value = false;
        document.removeEventListener("click", setMenuShowFalse);
      }
    };
    const leftClick = (e: any) => {
      document.removeEventListener("click", setMenuShowFalse);
      const { pageX, pageY } = e;
      isMenuShow.value = true;
      left.value = pageX + 5;
      top.value = pageY + 5;
      document.addEventListener("click", setMenuShowFalse);
    };
    // 如果是装备则获取详情
    if (props.item.type === "equipment") {
      getEquipDetail(props.item);
    }
    return {
      goodItem,
      rigthClick,
      equipData,
      wearableEquip,
      leftMenu,
      isMenuShow,
      leftClick,
      left,
      top
    };
  }
};
</script>
<style lang="scss" scoped>
.item {
  &.is-lock {
    filter: opacity(0.5);
  }
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
  .lock-icon {
    position: absolute;
    left: 0;
    top: 0;
    color: $--color-gold;
  }
  span {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
  }
}
.left-menu {
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid $--color-white;
  background: $--color-black-half-quarter;
  border-radius: $--border-radius;
  padding: 5px;
  & > div {
    padding-bottom: 5px;
    color: $--color-white;
    &:last-of-type {
      padding-bottom: 0px;
    }
  }
}
</style>
